<template>
  <div>
    <h_header></h_header>
    <h_right></h_right>
    <!-- 主体 -->
    <div>
      <div class="first">
        <div class="service1">
          <h2>服务项目</h2>
          <div class="inlineBlue"></div>
          <p>
            用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！
          </p>
        </div>
      </div>
      <div class="buliding">
        <div
          class="bulidingTop"
          v-for="item of bulidingList1"
          :key="item.index"
        >
          <!-- 头部标题 -->
          <h3>{{ item.title1 }}</h3>
          <p>
            {{ item.titleContent }}
          </p>
          <!-- 内容 -->
          <div class="bulidingContent">
            <div class="bulidingData" v-for="i of item.Content" :key="i.index">
              <div class="title">{{ i.title2 }}</div>
              <div class="bulidingImg">
                <img :src="i.imgSrc" alt="" />
              </div>
              <p>{{ i.text }}</p>
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="choose">
        <div class="chooseTitle">这也许是您即将选择我们的理由</div>
        <p>纵然我们已经拥有无数让您选择的理由，但我们看不上你</p>
        <div class="chooseTab">
          <div
            class="chooseTabList"
            v-for="item of chooseList"
            :key="item.index"
          >
            <div class="buzhidao">
              <img :src="item.chooseImg" alt="" />
              <div class="gun">
                <p>{{ item.title }}</p>
                <div class="lineChoose"></div>
              </div>
            </div>
            <div class="diaosi">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体结束 -->
    <h_question></h_question>
    <h_footer></h_footer>
  </div>
</template>
<script>
import h_header from "@/components/header/header.vue";
import h_right from "@/components/right/right.vue";
import h_footer from "@/components/footer/footer.vue";
import h_question from "@/components/question/question.vue";
export default {
  components: {
    h_header: h_header,
    h_right: h_right,
    h_footer: h_footer,
    h_question: h_question,
  },
  data() {
    return {
      bulidingList1: [
        {
          title1: "网站建设",
          titleContent:
            "企业网站、购物商城、行业门户、社区论坛、政府/事业单位等网站定制开发！",
          Content: [
            {
              title2: "企业网站",
              imgSrc: require("@/assets/service/gw.png"),
              text: "企业门户官网/企业营销型网站定制开发、设计、建设",
            },
            {
              title2: "行业门户",
              imgSrc: require("@/assets/service/ly-jf.png"),
              text: "垂直行业综合门户开发，资讯、交易、分类信息、下载等",
            },
            {
              title2: "购物商场",
              imgSrc: require("@/assets/service/shop.png"),
              text: "单/多用户商城、订单、支付、提现、财务管理",
            },
            {
              title2: "社区论坛",
              imgSrc: require("@/assets/service/bbs.png"),
              text: "会员管理及分级权限、板块分级及权限、帖子管理",
            },
            {
              title2: "政府官网",
              imgSrc: require("@/assets/service/gov.png"),
              text: "政府机构信息化建设，便民服务窗口，安全稳定",
            },
            {
              title2: "活动官网",
              imgSrc: require("@/assets/service/gw.png"),
              text: "活动官方网站，信息发布、投票、报名、评比等",
            },
            {
              title2: "O2O系统",
              imgSrc: require("@/assets/service/o2o.png"),
              text: "商家入驻、LBS定位、商品、附近商家、购物车、会员管理",
            },
            {
              title2: "外贸网站",
              imgSrc: require("@/assets/service/global.png"),
              text: "企业出海必备，多语言，针对Google针对性优化",
            },
          ],
        },
        {
          title1: "移动端/APP",
          titleContent:
            "手机网站、原生APP、API开发、H5单页等移动终端产品定制开发！",
          Content: [
            {
              title2: "手机网站",
              imgSrc: require("@/assets/service/gw.png"),
              text: "可以在手机浏览器、微信、独立APP等各种环境浏览的网站",
            },
            {
              title2: "APP开发",
              imgSrc: require("@/assets/service/ios.png"),
              text: "IOS和安卓两大主流平台的移动APP客户端开发",
            },
            {
              title2: "API开发",
              imgSrc: require("@/assets/service/gov.png"),
              text: "APP及网站服务端开发，提供规范的API技术文档",
            },
            {
              title2: "H5表单",
              imgSrc: require("@/assets/service/h5.png"),
              text: "提供活动、报名、招聘等形式的H5高逼格单页开发",
            },
          ],
        },
        {
          title1: "微信/小程序",
          titleContent:
            "基于微信/小程序模板消息、微信支付等开放组件及接口开发各类微信场景应用！",
          Content: [
            {
              title2: "企业网站",
              imgSrc: require("@/assets/service/gw.png"),
              text: "企业门户官网/企业营销型网站定制开发、设计、建设",
            },
            {
              title2: "行业门户",
              imgSrc: require("@/assets/service/ly-jf.png"),
              text: "垂直行业综合门户开发，资讯、交易、分类信息、下载等",
            },
            {
              title2: "购物商场",
              imgSrc: require("@/assets/service/shop.png"),
              text: "单/多用户商城、订单、支付、提现、财务管理",
            },
            {
              title2: "社区论坛",
              imgSrc: require("@/assets/service/bbs.png"),
              text: "会员管理及分级权限、板块分级及权限、帖子管理",
            },
            {
              title2: "政府官网",
              imgSrc: require("@/assets/service/gov.png"),
              text: "政府机构信息化建设，便民服务窗口，安全稳定",
            },
            {
              title2: "活动官网",
              imgSrc: require("@/assets/service/gw.png"),
              text: "活动官方网站，信息发布、投票、报名、评比等",
            },
            {
              title2: "O2O系统",
              imgSrc: require("@/assets/service/o2o.png"),
              text: "商家入驻、LBS定位、商品、附近商家、购物车、会员管理",
            },
            {
              title2: "外贸网站",
              imgSrc: require("@/assets/service/global.png"),
              text: "企业出海必备，多语言，针对Google针对性优化",
            },
          ],
        },
      ],
      chooseList: [
        {
          chooseImg: require("@/assets/service/ly-dz.png"),
          title: "个性定制",
          text:
            "您的想法加上我们的专业技术及服务能力产出您想想要的产品,绝非生搬硬套式开发。",
        },
        {
          chooseImg: require("@/assets/service/ly-gf.png"),
          title: "开发规范",
          text:
            "采用SVN/GIT等工具进行代码版本控制可以溯源代码历史，技术文档更加规范。",
        },
        {
          chooseImg: require("@/assets/service/ly-js.png"),
          title: "极速响应",
          text:
            "不管项目开发中，还是售后维护阶段；工程师快速响应，紧急问题下班时间照常响应。",
        },
        {
          chooseImg: require("@/assets/service/ly-aq.png"),
          title: "安全稳定",
          text:
            "实时监测服务器集群运行状态、资源占用率；程序自动进行数据库数据备份。",
        },
        {
          chooseImg: require("@/assets/service/ly-jf.png"),
          title: "完整交付",
          text:
            "域名/空间/备案等账号、源代码、技术文档等所有的输出物全部交付给甲方。",
        },
        {
          chooseImg: require("@/assets/service/ly-sh.png"),
          title: "完整售后",
          text:
            "不少于一年售后服务期，包含故障修复、备案、备份、安全防护、问题咨询等。",
        },
      ],
      act: "",
    };
  },
  methods: {
    // broaden() {
    //   this.act = "width:60px";
    // },
    // shrink() {
    //   this.act = "width:30px";
    // },
  },
};
</script>
<style lang="scss">
.service1 {
  background: url("../../assets/service/service.jpg") no-repeat;
}

// buliding部分
.buliding {
  box-sizing: border-box;
  padding: 100px 200px;
  width: 100%;
  min-width: 1300px;
  .bulidingTop {
    h3 {
      text-align: center;
      font-size: 30px;
      font-weight: 400;
      margin: 0;
    }
    p {
      text-align: center;
      color: #aaa;
    }
    .bulidingContent {
      width: 100%;
      box-sizing: border-box;
      overflow: auto;
      margin-top: 45px;
      margin-bottom: 100px;
      display: flex;
      flex-wrap: wrap;
      .bulidingData {
        width: 25%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        .title {
          text-align: center;
          margin-top: 15px;
          font-size: 18px;
          color: #666;
        }
        .bulidingImg {
          padding: 15px;
          img {
            display: block;
            margin: 0 auto;
            width: 45px;
            height: 45px;
          }
        }
        p {
          color: #aaaaaa;
          margin-top: 0;
          padding: 0 30px;
          box-sizing: border-box;
          font-size: 13px;
          text-align: center;
          margin-bottom: 13px;
        }
      }
    }
  }
}

// choose部分
.choose {
  height: 550px;
  width: 100%;
  background: #303449;
  box-sizing: border-box;
  padding: 100px 200px;
  .chooseTitle {
    text-align: center;
    color: #fff;
    font: {
      size: 30px;
      weight: 500;
    }
    letter-spacing: 5px;
  }
  p {
    color: #aaa;
    text-align: center;
  }
  .chooseTab {
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
  }
  //鼠标hover效果
  .chooseTabList:hover .lineChoose {
    width: 60px !important;
  }
  .chooseTabList {
    width: 33%;
    box-sizing: border-box;
    margin-bottom: 30px;
    cursor: pointer;
    .buzhidao {
      width: 100%;
      display: flex;
      img {
        height: 30px;
        width: 30px;
        margin-right: 10px;
      }
      .gun {
        height: 30px;
        p {
          width: 100%;
          margin: 10px 0;
          color: #fff;
          font: {
            size: 15px;
            weight: 500;
          }
        }
        .lineChoose {
          height: 2px;
          width: 30px;
          background: #0595c7;
          transition: 0.3s ease-in-out;
        }
      }
    }
    .diaosi {
      color: #aaaaaa;
      font-size: 13px;
      font-weight: 300;
      box-sizing: border-box;
      padding: 20px 40px;
    }
  }
}
</style>